<template>
	<page-meta :page-style="'overflow:'+(pageMetaShow?'hidden':'visible')"></page-meta>
	<view class="content" :style="{paddingTop: (titleTop + statusBarHeight) + 'px'}">
		<view class="mainHeader" :style="{paddingTop: titleTop + 'px'}">
			<headNav class="headWrap" :minHeight="statusBarHeight" :navTitle="navTitle">
			</headNav>
		</view>
		<view class="inputWrap">

			<view class="inputLay">
				<uni-easyinput trim="all" :styles="styles" :placeholderStyle="placeholderStyle" primaryColor="#FF9BA7"
					placeholder="搜索消费记录" v-model="value1" prefixIcon="search" confirmType="search" @confirm="resetList"
					@clear="resetList">

				</uni-easyinput>
				<uni-datetime-picker v-model="range" type="daterange" @change="change" @maskClick="maskClick">
					<image src="/static/my/dateIcon.png" class="dateIcon" mode="aspectFit"></image>
				</uni-datetime-picker>

			</view>
		</view>
		<view class="orderWrap">
			<noData v-if="orderList.length === 0 && !loading"></noData>
			<template v-else>
				<view class="orderItem" v-for="(item,index) in orderList" :key="index">
					<view class="header">
						<view class="title">
							{{item.shop_name}}
						</view>
						<view class="number">
							喵喵订单号：{{item.order_no}}
						</view>
					</view>
					<cardListItem :cardWidth='108' :cardHeight='108' :price="item.amount" :title="item.shop_name"
						:avatar="item.shop_avatar|completeUrl">
						<template #priceTip>
							<view class="priceTip">实付款</view>
						</template>
						<template #itemRightBox>
							<view class="dateTxt">
								<!-- 	{{$timeAgo(item.created_at,1)}}  -->
								<!-- 2025-5-20 <view class="time">12:30</view> -->
								{{item.created_at}}
							</view>
							<view class="bntBox">
								<view class="BntItem again" @click="linkUrl(`/pages/gashaponMachine/gashaponMachine?shopId=${item.shop_id}&machineId=${item.machine_id}`)">
									再买一单
								</view>
							</view>
						</template>
					</cardListItem>
					<view class="buyMore" @click="ordersDetail
						(item.order_no)">
						<!-- ('MM25930f3a')">  -->
						购买详情 <uni-icons class="rightIcon" type="right" color="#333333" size="14"></uni-icons>
					</view>
				</view>
				<uni-load-more :status="loading ? 'loading' : noMoreData ? 'noMore' : 'more'"
					iconType="auto"></uni-load-more>
			</template>
		</view>
		<uni-popup ref="popupB" @change="changePopup" safeArea border-radius="40px 40px 0 0" background-color="#fff">
			<view class="popupBContent" style="height: 70vh;">
				<!-- 因为总变，最后不知道是页面还是弹窗。所以直接引用页面 -->
				<view class="popupHead">

					<view class="title">
						购买详情
					</view>
					<view class="clearBox" @click="closePopB">
						<uni-icons type="closeempty" color="#999999" size="16"></uni-icons>
					</view>
				</view>
				<scroll-view scroll-y="true" style="height: calc(70vh - 150rpx )">
					<view class="cardLay">
						<noData v-if="orderImg.length === 0"></noData>
						<template v-else>
							<view class="cardItem" v-for="(item,index) in orderImg" :key="index">
								<cardBag :cardData="item" :urlKey="'image_url'">
									<!-- <template #option>
									<view class="optionLay" @click="optionFN(item)">
										<uni-icons v-if="item.action" type="checkbox-filled" color="#fff"
											size="14"></uni-icons>
										<uni-icons v-else type="circle" color="#fff" size="14"></uni-icons>
									</view>
								</template> -->
									<template #infoMore>
										<view class="infoLay">
											<view class="consumptionInfo">
												<view class="lable">
													<!-- 累消 -->
												</view>
												<view class="value">
													<text class="unit">￥</text>

													{{item.actual_amount||0}}
												</view>
											</view>
											<!-- 	<view class="shopInfo">
											<image class="logo" src="" mode="aspectFit"></image>
											<view class="title">
												<view>鬼灭扭蛋馆鬼灭扭蛋馆鬼灭扭蛋馆</view>
												<uni-icons type="right" color="#5A5A5A" size="8"></uni-icons>
											</view>
										</view> -->
										</view>
									</template>
								</cardBag>
							</view>
						</template>
					</view>
				</scroll-view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pageMetaShow: false,
				navTitle: '消费记录',
				styles: {
					backgroundColor: " #F2F2F2",
					color: '#343434',
					borderColor: '#F2F2F2',
				},
				placeholderStyle: "color:#B6B6B6;font-size:21rpx",
				value1: '',
				range: [],
				single: '',
				page: 1, // 当前页码
				page_size: 12, // 每页数量
				total: 0, // 总数据量
				loading: false, // 是否正在加载
				noMoreData: false, // 是否没有更多数据
				orderList: [],
				orderImg: []
			};
		},
		async onLoad() {
			await this.$onLaunched
			this.getOrdersList();
		},
		onShow() {

		},
		// 触底加载更多
		onReachBottom() {
			// 如果没有更多数据或正在加载，则返回
			if (this.noMoreData || this.loading) return

			// 页码增加并获取下一页数据
			this.page++
			this.getOrdersList()
		},

		// 下拉刷新
		onPullDownRefresh() {
			this.value1 = '';
			this.range = [];
			this.resetList();
			// 设置超时自动停止刷新（防止接口失败导致一直刷新）
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 5000);
		},
		methods: {
			linkUrl(url) {
				uni.navigateTo({
					url
				})
			},
			changePopup(e) {
				this.pageMetaShow = e.show
			},
			closePopB() {
				this.$refs.popupB.close()
			},
			ToggleB() {
				let that = this;
				this.$refs.popupB.open('bottom');

				// this.$refs.selfSelectedDirectPurchase.refsLoad(this.shopId,this.machineId);
			},
			maskClick(e) {
				console.log('maskClick事件:', e);
			},
			change(e) {
				console.log('change事件:', e);
				this.resetList();
			},
			// 重置列表（用于下拉刷新）
			resetList() {
				this.page = 1;
				this.noMoreData = false;
				this.getOrdersList()
			},
			getOrdersList() {

				// 防止重复请求
				if (this.loading) return;

				// 设置加载状态
				this.loading = true;
				uni.showLoading({
					title: '加载中...'
				})
				try {
					this.$http('/v1/orders/list', {
						page: this.page,
						page_size: this.page_size,
						keyword: this.value1 || '',
						start_time: this.range[0] || '',
						end_time: this.range[1] || '',
					}).then(res => {
						console.log(res);
						if (res.code === 0) {
							const
								data = res.data;
							// 如果是第一页，直接赋值
							if (this.page === 1) {
								this.orderList = data.list || []
							} else {
								// 后续页，合并数据
								this.orderList = [...this.orderList, ...(data.list || [])]
							}

							// 更新总数据量
							this.total = data.total || 0

							// 判断是否还有更多数据
							this.noMoreData = this.orderList.length >= this.total;
						} else {
							this.$showToast(res.msg)
						}
					})

				} catch (error) {
					console.error('请求失败:', error)
					uni.showToast({
						title: '网络请求失败',
						icon: 'none'
					})
				} finally {
					// 重置加载状态
					this.loading = false
					uni.hideLoading();
					uni.stopPullDownRefresh();
				}
			},
			// {{apiurl}}v1/orders/detail/ND2025080702134874e8518b7d84b67f
			ordersDetail(orderNo) {
				this.$http('/v1/orders/detail/' + orderNo, {
					// id: this.selectedIds,
				}, ).then(res => {
					console.log(res, "ordersDetail");
					if (res.code === 0) {
						this.orderImg = res.data.images || [];
						// this.downloadSelected()
						this.ToggleB()
					} else {
						this.$showToast(res.msg)
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.mainHeader {
		position: fixed;
		top: 0;
		z-index: 9;
		background-color: #FFFFFF;
	}

	.inputWrap {
		height: 96upx;
	}

	::v-deep .inputLay {
		// padding: 40upx auto 0;
		padding-top: 20upx;
		padding-left: 42upx;
		padding-bottom: 20upx;
		position: fixed;
		z-index: 9;
		background-color: #FFFFFF;
		@include flexLayout(center, space-between);

		.is-input-border {
			width: 582upx;
			border-radius: 30upx;
		}

		.uni-easyinput__content-input {
			height: 56upx;
		}

		.dateIcon {
			@include setwh(38upx, 38upx);
			margin: 0 44upx;
		}

		.uni-calendar-item--multiple .uni-calendar-item--before-checked,
		.uni-calendar-item--multiple .uni-calendar-item--after-checked,
		.uni-calendar-item__weeks-box .uni-calendar-item--checked,
		.uni-datetime-picker--btn {

			background-color: #FF7994;
		}

		.uni-calendar-item--multiple,
		.uni-calendar-item--before-checked-x {

			background-color: #F8F2F6;
		}
	}

	.orderWrap {
		width: 620upx;
		margin: 0 auto;
		padding-bottom: 80upx;

		::v-deep .orderItem {
			margin-top: 22upx;

			.header {
				@include flexLayout(center, space-between);
				padding-bottom: 12upx;
				border-bottom: 2upx solid #F0F0F0;
				margin-bottom: 12upx;

				.title {
					font-family: SourceHanSansSC, SourceHanSansSC;
					font-weight: bold;
					font-size: 30rpx;
					color: #454545;
					line-height: 40rpx;
				}

				.number {
					font-family: SourceHanSansSC, SourceHanSansSC;
					font-weight: 500;
					font-size: 20rpx;
					color: #454545;
					line-height: 29rpx;
				}
			}

			.cardItem .itemBox {
				border-bottom: none;
				padding-bottom: 10upx;

				.itemLeft .itemInfo .title {
					font-weight: bold;
					font-size: 24rpx;
					margin-bottom: 20upx;
				}

			}

			.priceTip {
				font-size: 20rpx;
				color: #454545;
			}
		}

		.dateTxt {
			@include flexLayout(center, center);
			font-family: SourceHanSansSC, SourceHanSansSC;
			font-weight: 500;
			font-size: 20rpx;
			color: #454545;
			line-height: 30rpx;
			margin-bottom: 26upx;

			.time {
				margin-left: 20upx
			}
		}

		.bntBox {

			// @include flexLayout(center, center);
			// padding-right: 30upx;
			.BntItem {
				width: 124rpx;
				height: 48rpx;
				background: #DAF3F6;
				border-radius: 26rpx;
				font-size: 20rpx;
				text-align: center;
				line-height: 48upx;
				margin-left: auto;

				&+.BntItem {
					margin-left: 20upx;
				}
			}

			.again {
				background: #DAF3F6;
				color: #4EBBA7;
			}

			.follow {
				@include flexLayout(center, center);
				background: linear-gradient(90deg, #FFC1D2 0%, #FE94B2 100%);
				color: #FFFFFF;

				.barsIcon {
					margin-right: 10upx;
				}
			}
		}

		.buyMore {
			font-family: SourceHanSansSC, SourceHanSansSC;
			font-weight: 500;
			font-size: 20rpx;
			color: #454545;
			line-height: 30rpx;

			.rightIcon {
				margin-left: 12upx;
				line-height: 1;
			}
		}
	}

	.popupBContent {
		.popupHead {
			@include flexLayout(center,
				space-between);
			padding: 50upx 80upx 50upx;

			.title {
				// padding-left: 86upx;
				// padding-bottom: 66upx;
				font-family: AlimamaFangYuanTiVF, AlimamaFangYuanTiVF;
				font-weight: 500;
				font-size: 46rpx;
				color: #656565;
			}

			.clearBox {
				@include flexLayout(center, center);
				@include setwh(46upx, 46upx);
				background-color: #EDEDED;
				border-radius: 50%;

			}
		}

		.cardLay {

			padding: 0 18upx 80upx;
			@include flexLayout(center, flex-start);
			flex-wrap: wrap;
			column-gap: 8rpx;
			row-gap: 28upx;
			position: relative;
			z-index: 3;

			::v-deep .nodataLay {
				width:calc(100vw - 20upx);
			}

			::v-deep .cardItem {
				.optionLay {
					position: absolute;
					top: 0;
					left: 0;
					width: 40rpx;
					height: 32rpx;
					background: rgba(0, 0, 0, 0.43);
					border-radius: 0rpx 0rpx 10rpx 0rpx;

					.uni-icons {
						@include positionCenter;
						line-height: 1;
					}
				}

				.infoLay {

					.consumptionInfo {
						@include flexLayout(center, space-between);
						padding: 10upx 26upx 10upx 6upx;

						.lable {
							font-family: DingTalk, DingTalk;
							font-weight: normal;
							font-size: 28rpx;
							color: #FF7994;
							line-height: 32rpx;
						}

						.value {
							font-family: SourceHanSansSC, SourceHanSansSC;
							font-weight: bold;
							font-size: 24rpx;
							color: #FF7994;
							line-height: 32rpx;

							.unit {
								font-size: 20rpx;
							}
						}
					}

					.shopInfo {
						width: 100%;
						@include flexLayout(center, space-between);
						background: #FFF5F5;
						border-radius: 8rpx;
						padding: 4upx 10upx;

						.logo {
							@include setwh(28upx, 28upx);
							margin-right: 12upx;
							background-color: #666;
							border-radius: 50%;
						}

						.title {
							@include flexLayout(center, space-between);
							font-family: STHeitiSC, STHeitiSC;
							font-weight: 500;
							font-size: 16rpx;
							color: #5A5A5A;
							width: calc(100% - 40upx);

							view {
								width: 122upx;
								@include lineOver;
							}
						}
					}
				}
			}
		}

	}
</style>